<template>
    <div class="fl">
        <div>
            <van-sidebar  v-model="activeKey">
                <van-sidebar-item v-for="item,index in list" :key="index" :title="item.title" >
                </van-sidebar-item>
            </van-sidebar>
        </div>
        <div class="yc" v-if="list.length>0">
            <div  v-for="val,i in list[activeKey].children" :key="i">
                <p>{{val.title}}</p>
                <img :src="val.img" alt="">
            </div>
        </div>
    </div>
</template>

<script>
import "../../utils/listData"
import instance from "../../utils/Request"
export default {
 data() {
    return {
      activeKey: 0,
      list:[],
    };
  },
  mounted() {
    instance.get("/list").then(res=>{
        this.list=res.data.list
    })
  },
  
}
</script>
 
<style lang='scss'>
.fl{
    display: flex;
    .yc{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        div{
            width: 50%;
        }
    }    
}
</style>